<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor
        :itemList="[
          { name: 'box-base', title: '基础信息' },
          { name: 'box-dtl', title: '发票明细' },
        ]"
      />
    </div>

    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <div id="box-base" class="box-title">基础信息</div>
          <customFormItem label="单号" name="code" :parent="_self" :form="form"/>
          <customFormItem
            label="供应商" name="supplierName" :parent="_self" :form="form"
            :readonly="true"
            :showSelectIcon="true"
            @focus="utilSelect.supplier(supplierChange)"
            disabled
            help="保存后不可修改"
          />
          <customFormItem
           label="开始日期"
           name="gmtStart"
           :parent="_self"
           :form="form"
           :type="constCommon.formItemType.datePicker.name"
         />
         <customFormItem
           label="截止日期"
           name="gmtEnd"
           :parent="_self"
           :form="form"
           :type="constCommon.formItemType.datePicker.name"
         />
         <customFormItem label="开票人" name="drawer" :parent="_self" :form="form"/>
         <customFormItem
           label="开票日期"
           name="gmtMakeOut"
           :parent="_self"
           :form="form"
           :type="constCommon.formItemType.datePicker.name"
         />

         <customFormItem label="开票金额" name="totalAmount" :parent="_self" :form="form"
            :type="constCommon.formItemType.inputNumber.name"
            :config="{defaultValue: 0}"
          />
         <customFormItem label="期号" name="periodNo" :parent="_self" :form="form"/>
         <customFormItem label="税务发票号" name="invoiceNo" :parent="_self" :form="form"/>
         <customFormItem label="备注" name="remark" :parent="_self" :form="form"/>

        </template>
      </customForm>
      <div id="box-dtl" class="box-title">发票明细</div>
      <data-view
        ref="childDataView"
        propViewKey="finance_invoice_item"
        propViewForm="finance/invoice-item/detail.vue"
        :propInitData="form"
        :propParentData="propParent.viewFormData"
        :propParentPage="_self"
        :propAutoFetchData="false"
        :propHideFlowSelect="true"
        :propFlowKey="propParent.propFlowKey"
        :propNoEditRow="true"
        :propPreQueryWrapper="$newWrapper().eq('invoiceId', this.form.id)"
      />

    </div>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'

export default {
  data() {
    return {
      form: {},
      viewData: {}
    }
  },
  created() {
    console.log('propReadonly', this.propReadonly)
    this.$emit('event-register', {
      validate: callback => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        if (this.form.id) {
          this.$refs.childDataView.fetchData()
        }
      },
      afterSave: () => {
      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {},
      beforeFlow: flowButtonKey => {
        return true
      },
      afterFlow: flowButtonKey => {},
      beforeClose: () => {
        return true
      }
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object
  },
  components: {customAnchor},
  computed: {},
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>
